<template>
    <div>
        <HETTable ref="systemWhitelistTable"
            :pageSize="10" 
            :tableFields="whitelistTableFields" 
            :tableData="TableData"
            :enableSearch="true"
            :tableCheckbox="true"
            :headerOperation="headerOperation"
            :handleSelectionChange="handleSelectionChange" 
            :total="whitelistTotal"
            :handleSelectable="handleSelectable"
            @getTableData="getWhitelist">
        </HETTable>
        <el-dialog v-if="whitelistSystem" v-model="whitelistSystem" title="手动添加" width="500" :center="true" :close-on-click-modal="false">
            <el-form ref="whitelistForm" :model="form" class="px-10"  :rules="rules" label-width="80px" label-position="right">
                <el-form-item label="引用" prop="file">
                    <el-input class="input-width mb-2.5" v-model="form.file" placeholder="点击浏览选择文件夹" :disabled="true" autocomplete="off" />
                    <el-button @click.stop="treeStore.directoryDialogVModel = true">浏览</el-button>
                </el-form-item>
                <el-form-item label="签名名称" prop="cert">
                    <el-input class="input-width" v-model="form.cert" autocomplete="off" />
                </el-form-item>
                <el-form-item label="证书编号" prop="certsn">
                    <el-input class="input-width" v-model="form.certsn" autocomplete="off" />
                </el-form-item>
                <el-form-item label="颁布者" prop="publicCert">
                    <el-input class="input-width" v-model="form.publicCert" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="querySystem">
                确定
                </el-button>
                <el-button @click="whitelistSystem = false">取消</el-button>
            </div>
            </template>
        </el-dialog>
        <DirectoryDialog ref="whitelistDirRef" :dirFlag="dirFlag" @handleDialogButton="handleDialogButton"   :os="treeStore.osType"></DirectoryDialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import HETTable from '~/components/common/HETTable.vue'
import { ElMessage } from 'element-plus'
import { 
    req_getWhitelist,
    req_getWhitelistFilecert,
    req_setWhitelistFile,
    req_deleteWhitelistFile
} from '~/utils/axios/programWhitelist.js'
import { useTreeStore } from "~/utils/pinia/tree.js"
import { Refresh, Delete, Edit, Plus, Download, Upload } from '@element-plus/icons-vue'
import DirectoryDialog from '~/components/common/DirectoryDialog.vue'
// 修改成功提示
const successElMessage = () => {
    ElMessage({
        message: '修改成功',
        type: 'success',
    })
} 
// 树形组件pinia注册
const treeStore = useTreeStore()
/**
 * 
 * 手动添加模态框
 * 
 * ***/ 
// 模态框model
const whitelistSystem = ref(false);
// 模态框表格ref
const whitelistForm = ref();
// 模态框 form 表单数据
const form = reactive({
    file: '',
    cert: '',
    certsn: '',
    publicCert: ''
})
// form表单校验
const rules = reactive({
    cert: [
      { required: true, message: "签名名称不能为空", trigger: "change" },
    ],
})
// 模态框确认提交函数
const querySystem = () => {
    if (!whitelistForm) return
    whitelistForm.value.validate(async (valid, fields) => {
        if (valid) {
            let queryParams = {
                deviceId: treeStore.treeDeviceId,
                policyId: 2,
                json:[{
                        filename: form.cert,
                        filemd5: form.certsn,
                        termSpec: form.publicCert,
                }]
            }
            await req_setWhitelistFile(queryParams).then( res => {
                successElMessage()
            })
            whitelistSystem.value = false;
            systemWhitelistTable.value.getTableData();
        }
    })
}
/**
 * 
 * 树形目录组件
 * 
 * ***/
// ref
const whitelistDirRef = ref()
// 选择文件还是文件夹
const dirFlag = ref(false)
const handleDialogButton = async (ref,path) => {
    form.file = path;
    let filecertParams = {
        deviceId: treeStore.treeDeviceId,
        file: form.file,
    }
    req_getWhitelistFilecert(filecertParams).then(res => {
        const { cert, certsn, publicCert } = res.data;
        form.cert = cert;
        form.certsn = certsn;
        form.publicCert = publicCert;
    })
}

/**
 * 
 * 操作系统白名单表格
 * 
 * ***/ 
// 表格 ref
const systemWhitelistTable = ref()
// 表格数据存放
let TableData = ref()
// 表格数据数量
let whitelistTotal = ref(0)
//  表格中用户选择复选框时的数据
let selectionChangeValue = ref()
// 表格中用户选择复选框后可点击按钮flag
let handleSelectionChangeFlag = ref(false)
// 应用程序白名单
const whitelistTableFields = reactive([
    { name: "filecertsigner", label: "签名证书"},
    { name: "filemd5", label: "证书编号" },
    { name: "termSpec", label: "颁布者"},
])
// el-table表格中，用来判断哪些行的复选框可选中
const handleSelectable = (row,index) => {
    return row.specwtoid.length > 3
}
const delWhitelist = async () => {
    let specwtoidArr = []
    selectionChangeValue.value.map(item => {
        specwtoidArr.push(item.specwtoid)
    })
    let deleteParams = {
        deviceId: treeStore.treeDeviceId,
        policyId: 2,
        json: specwtoidArr
    }
    await req_deleteWhitelistFile(deleteParams).then( res=> {
        successElMessage()
    },err => {
        ElMessage.error(err)
    })
    systemWhitelistTable.value.getTableData()
}
const addManual = () => {
    whitelistSystem.value = true;
    dirFlag.value = false;
}
const addScan = () => {
    
}
const headerOperation = [
    { name: '删除', ev: delWhitelist, icon: Delete, disabled: handleSelectionChangeFlag },
    { name: '手动添加', ev: addManual, icon: Plus, },
/*
    { name: '扫描添加', ev: addScan, icon: Plus, },
*/
]
// 表格中用户选择复选框时的函数
const handleSelectionChange = (val) => {
    selectionChangeValue.value = val;
    if (val.length >= 1) {
        handleSelectionChangeFlag.value = false;
    } else {
        handleSelectionChangeFlag.value = true;
    }
}
const getWhitelist = async (countParams, searchParams, tableSearch) => {
    if(!treeStore.treeDeviceId){
        return
    }
    let whitelistParams = {
        page: searchParams.$page,
        size: searchParams.$limit,
        type: 1,
        policyId: 2,
        key:tableSearch
    }
    await req_getWhitelist(treeStore.treeDeviceId,whitelistParams).then( res => {
        TableData.value = res.data.whiteList
        whitelistTotal.value = Number(res.data.total) || 0;
    },err => {
        ElMessage.error(err)
    })
    systemWhitelistTable.value.finish()
}
treeStore.treeLinkedTableRef = systemWhitelistTable;
</script>

<style lang="scss" scoped>

</style>